<template>
  <el-dialog
    title="添加批次号"
    align-center
    :model-value="dialogVisible"
    @close="cancle"
    width="700px"
  >
    <el-form ref="addFormRef" :model="formData.data" label-suffix="：" label-width="100px">
      <el-form-item
        label="出境批次"
        prop="batchNumNew"
        class="batch-num"
        :rules="[{ required: true, message: '请选择出境批次', trigger: 'change' }]"
      >
        <el-select-v2
          placeholder="请选择出境批次"
          clearable
          v-model="formData.data.batchNumNew"
          :options="exitBatch"
          :props="batchProps"
          :loading="batchLoading"
          @change="handleBatchChange"
        />
        <div class="exit-batch-info mb-0px" v-if="formData.data.batchNumNew">
          <span class="pr-16px">
            <span class="text-info">联系人: </span>
            <span>{{ currentBatch?.linkName }}</span>
          </span>
          <span class="pr-16px">
            <span class="text-info">单位名称: </span>
            <span>{{ currentBatch?.unitName }}</span>
          </span>
          <span class="pr-16px">
            <span class="text-info">联系方式: </span>
            <span>{{ currentBatch?.linkWay }}</span>
          </span>
          <span class="pr-16px">
            <span class="text-info">接收者名称: </span>
            <span>{{ currentBatch?.receiverName }}</span>
          </span>
          <p class="my-0">
            <span class="text-info">出境场景描述: </span>
            <span>{{ currentBatch?.sceneDesc }}</span>
          </p>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="$emit('close')">取消</el-button>
      <el-button @click="handleSubmit" type="primary">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { batchNumInfo } from '@/api/asset/taskManage/dataCollect'
const props = defineProps({
  dialogVisible: {
    default: false,
    type: Boolean
  }
})
const emits = defineEmits(['close'])
const addFormRef = ref()
const batchProps = { label: 'batchNum', value: 'jsonStr', key: 'batchNum' }
const exitBatch = ref([])
const currentBatch = ref({})
const batchLoading = ref(false)
const formData = reactive({
  data: {
    exitBatch: '1',
    batchNumNew: ''
  }
})

const handleBatchChange = (val) => {
  if (val) {
    currentBatch.value = JSON.parse(val)
  } else {
    currentBatch.value = {}
  }
}

const handleSubmit = async () => {
  const valid = await addFormRef.value.validate()
  if (!valid) {
    return
  }
  console.log(currentBatch.value.batchNum, 'currentBatch.value.batchNum')

  emits('close', currentBatch.value.batchNum)
}

onMounted(async () => {
  batchLoading.value = true
  batchNumInfo({})
    .then(({ data }) => {
      exitBatch.value = data.map((item) => {
        item.jsonStr = JSON.stringify(item)
        return item
      })
      batchLoading.value = false
    })
    .catch(() => {
      batchLoading.value = false
    })
})
</script>

<style lang="scss" scoped></style>
